<template>
  <view class="wrap">
    <uv-navbar :fixed="false" title="社群专栏" autoBack safeAreaInsetTop placeholder :border='false'>
      <!-- <template v-slot:right>
        <view class="navEditName nav-right">管理</view>
      </template> -->
    </uv-navbar>
    <view class="desc">支持创建20个专栏</view>
    <view class="list" v-if="!showLeng">
      <uv-cell-group>
        <uv-cell  v-for="(item, index) in list" :key="index" :title="item.name" label="" url='' :arrow='false' isLink center border titleStyle='font-weight: 500; font-size: 32rpx; color: #2B2B2B;' cellStyle='background-color: #FFF'>
          <template v-slot:right-icon>
            <view @click="openAction(item)">
              <uv-icon name="more-dot-fill" size='40rpx'></uv-icon>
            </view>
          </template>
        </uv-cell>
      </uv-cell-group>
    </view>
    <uv-empty :show='showLeng' mode="list" marginTop='200rpx'></uv-empty>
    <view class="footer">
      <button class="btn" @click="addColumn">添加专栏</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    
    <view class="action">
      <uv-action-sheet ref="actionSheet" :title='rows.name' description='' :actions="sheet" round='40rpx' cancelText='取消' safeAreaInsetBottom closeOnClickOverlay closeOnClickAction @select="select"> </uv-action-sheet>
    </view>
    
    <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222 ' content='本专栏中所有主题全部取消专栏显示。' @confirm="confirm"></uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { post } from '@/api';
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useOrder } from '@/store';
import { toast } from '@/common';

const actionSheet = ref(null);
const modal = ref(null);

const sheet = [{name: '编辑专栏', id: 1}, {name: '删除专栏', id: 2}];
let list = ref([]);
let rows = ref({});
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);

const body = computed(() => {
  const store = useOrder();
  return uni.$uv.deepClone(store.group);
});

onShow(() => {
  page = 1;
  list.value = [];
  getList();
})
// 下拉刷新
onPullDownRefresh(() => {
  page = 1
  list.value = [];
  getList();
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  await getList();
  uni.hideLoading();
})

// 获取列表数据
function getList(){
  const params = {
    association_id: body.value.id,
    page: page,
    limit: 20
  }
  post('api/association_column/getAssociationColumnList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function deleteRow(){
  post('api/association_column/delAssociationColumn', { column_id: rows.value.id }).then(res => {
    if(res.code == 1){
      toast('删除成功');
      page = 1
      list.value = [];
      getList();
    }
  })
}
function confirm(){
  modal.value.close();
  deleteRow();
}
function select(value){
  if(value.id == 2){
    modal.value.open();
    actionSheet.value.close();
  }else{
    uni.navigateTo({
      url: `/pages/group/setting/columnEdit?id=${rows.value.id}&name=${rows.value.name}&desc=${rows.value.desc}`
    });
  }
}
function openAction(item){
  rows.value = uni.$uv.deepClone(item);
  actionSheet.value.open();
}
function addColumn(){
  if(total >= 20) return toast('最多只能创建20个专栏');
  uni.navigateTo({
    url: '/pages/group/setting/columnEdit'
  });
}
</script>

<style lang="scss" scoped>
  .action{
    :deep(.uv-action-sheet__header__icon-wrap){
      display: none;
    }
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
  }
  .list{
    padding: 0 30rpx;
    background-color: #fff;
    :deep(.uv-cell__body){
      padding: 10px 0;
      .uv-cell__left-icon-wrap{
        margin-right: 0;
        .uv-icon{
          margin-right: 32rpx;
        }
      }
    }
  }
  .desc{
    padding: 26rpx 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
  }
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    &.nav-right{
      color: #E43222;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>